<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">

      <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书借阅记录</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-table :data="borrowList" stripe style="width: 100%">
        <el-table-column prop="borrowId" label="编号"></el-table-column>
        <el-table-column prop="bookId" label="图书ID"></el-table-column>
        <el-table-column prop="bookName" label="图书名称"></el-table-column>
        <el-table-column prop="publish" label="图书出版社"></el-table-column>
        <el-table-column prop="author" label="图书作者"></el-table-column>
        <el-table-column prop="username" label="借阅人"></el-table-column>
        <el-table-column prop="userId" label="借阅者ID"></el-table-column>
        <el-table-column prop="borrowDate" label="借出时间" sortable width="200px"></el-table-column>
        <el-table-column prop="returnDate" label="归还时间" sortable width="200px"></el-table-column>
        <el-table-column label="归还信息" :filters="[{ text: '已归还', value: 0 }, { text: '未归还', value: 1 }]"
          :filter-method="filterMethod" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'primary' : 'success'" disable-transitions>{{
              scope.row.status === 0 ? '已归还' :
              '未归还' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable width="500px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" :disabled="scope.row.status !== 1"
              disable-transitions>
              {{ '点击归还' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="borrowParams.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="borrowParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'

import { getBorrowList, retrunById } from '@/request/user'

export default {
  data () {
    return {
      total: 0,
      borrowParams: {
        name: '', // 名称
        currentPage: 1, // 当前页数
        pageSize: 5
      },
      borrowList: []
    }
  },
  created () {
    this.getBorrowList()
  },
  methods: {
    async handleEdit (row) {
      const data = await retrunById({ borrowId: row.borrowId })
      if (data.code != 200) return this.$message.error(data.msg)
      else this.$message.success(data.msg)
      // this.$message.success(data.msg)
      this.getBorrowList()
    },
    handleSizeChange (num) {
      this.borrowParams.pageSize = num
      this.getBorrowList()
    },
    handleCurrentChange (curnum) {
      this.borrowParams.currentPage = curnum
      this.getBorrowList()
    },
    async getBorrowList () {
      const data = await getBorrowList({ ...this.borrowParams, user_id: JSON.parse(sessionStorage.getItem('user')).id, book_id: 1 })
      data.data.records.forEach(item => {
        item.borrowDate = item.borrowDate ? dayjs(item.borrowDate).format('YYYY-MM-DD HH:mm:ss') : '暂无'
        item.returnDate = item.returnDate ? dayjs(item.returnDate).format('YYYY-MM-DD HH:mm:ss') : '暂无'
      })
      if (data.code != 200) return this.$message.error(data.msg)
      // console.log(data.data.records);
      this.borrowList = data.data.records
      this.total = data.data.total
    },
    filterMethod (value, row) {
      if (value == 1) {
        return row.back_date
      } else {
        return !row.back_date
      }
    }
  }
}
</script>

<style></style>
